<template>
  <div class="container">
    <div class="city-name">当前所在城市：广州市</div>
    <el-input
      v-model="searchCity"
      style="width: 240px"
      placeholder="请输入您要搜索的城市名称"
      :prefix-icon="Search"
      @blur="handleSearchCity"
      @keyup.enter="handleSearchCity"
    />
    <el-select
      v-model="drawType"
      placeholder="选择绘制图形"
      style="width: 240px"
      @change="handleDrawType"
    >
      <el-option
        v-for="item in selectDrawOptions"
        :key="item.type"
        :label="item.label"
        :value="item.type"
      />
    </el-select>

    <el-select
      v-model="drawImage"
      placeholder="选择要标注的内容"
      style="width: 240px"
      @change="handleDrawImage"
      @click="handleAlert"
      :disabled="props.updateZoom < 12"
    >
      <el-option
        v-for="item in selectImageOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
      <!-- 禁用时显示提示 -->
      <template #disabled>
        <div style="padding: 4px 16px; color: #909399; cursor: not-allowed">
          缩放级别需大于12才能选择
        </div>
      </template>
    </el-select>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'


//将数据传输给父组件
const emit = defineEmits(['initCity', 'searchCity', 'drawType', 'drawImage'])

//接受zoom的值
const props = defineProps({
  updateZoom: {
    type: Number,
    default: 8,
  },
})

const searchCity = ref('')
const drawType = ref('')
const drawImage = ref('')

//当前所在城市
const initCity = ref({
  name: '',
  adcode: '',
  features: {},
})

//定义选项内容
const selectDrawOptions = [
  { type: 'Point', label: '点要素' },
  { type: 'LineString', label: '线要素' },
  { type: 'Polygon', label: '多边形要素' },
  { type: 'Rectangle', label: '矩形要素' },
  { type: 'Circle', label: '圆要素' },
  { type: 'zdy', label: '自由绘制' },
]
const selectImageOptions = [
  { value: 'bus', label: '公交站' },
  { value: 'underground', label: '地铁' },
  { value: 'busstop', label: '汽车站' },
  { value: 'park', label: '停车场' },
]

//绑定input事件
const handleSearchCity = () => {
  emit('searchCity', searchCity.value)
}

//绑定select事件
const handleDrawType = (value) => {
  emit('drawType', value)
}
const handleDrawImage = (value) => {
  emit('drawImage', value)
}

//select框的提示
const handleAlert = (e) => {
  if (props.updateZoom < 12) {
    e.preventDefault() // 阻止默认行为
    ElMessage({
      message: '当缩放级别大于12的时，可以选择标注内容',
      type: 'warning',
      duration: 2000,
    })
  }
}

onMounted(async () => {
  const currentCity = await axios.get(
    'https://restapi.amap.com/v3/ip?key=4f18e9fff456078b2892d6138e1adc90&ip=120.235.179.240'
  )
  initCity.value.name = currentCity.data.city
  initCity.value.adcode = currentCity.data.adcode

  //根据获得的adcode ，请求当前城市的要素信息，将要素信息传递给父组件
  const features = await axios.get(
    `https://geo.datav.aliyun.com/areas_v3/bound/${initCity.value.adcode}.json`
  )
  // console.log(features.data.features)
  initCity.value.features = features.data.features[0]
  // console.log(initCity.value)
  emit('initCity', initCity.value) //将当前城市信息传给父组件
})
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  justify-content: left;
  align-items: center;
  width: 100vw;
  height: 10vh;
  background-color: #4164fc;
  padding-left: 20px;
  .city-name {
    color: #fff;
    margin-right: 30px;
  }
  .el-input {
    margin-right: 30px;
  }
  .el-select {
    margin-right: 30px;
  }
}
</style>
